// src/pages/Home/Home.js
import React from 'react';
import { Layout, Menu, Avatar, Typography } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom';  // 新增Outlet

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

const Home = () => {
    const navigate = useNavigate();

    // 修改路由跳转路径
    const handleUserManagementClick = () => {
        navigate('userlist');  // 从/users改为/userlist
    };
    const handleSystemManagementClick = () => {
      navigate('systemlist');  // 增加系统管理
  };

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 左侧导航栏（保持不变） */}
            <Sider 
                width={200} 
                style={{ 
                    borderRight: '1px solid #f0f0f0',
                    background: '#fff',
                }}
            >
                {/* Logo 区域 */}
                <div style={{ 
                    padding: '16px 24px',
                    borderBottom: '1px solid #f0f0f0',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <img 
                        src={process.env.PUBLIC_URL + '/logo.png'} 
                        alt="Logo" 
                        style={{ 
                            height: 40,
                            maxWidth: '100%' 
                        }} 
                    />
                </div>

                {/* 导航菜单（关键修改） */}
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    style={{ height: 'calc(100% - 65px)', borderRight: 0 }}
                >
                    <Menu.Item key="1" onClick={() => navigate('/')}>首页</Menu.Item>
                    <Menu.Item key="2" onClick={handleUserManagementClick}>用户管理</Menu.Item>
                    <Menu.SubMenu key="sub1" title="内容管理">
                        <Menu.Item key="3">文章列表</Menu.Item>
                        <Menu.Item key="4">分类管理</Menu.Item>
                    </Menu.SubMenu>
                    <Menu.Item key="5" onClick={handleSystemManagementClick}>系统设置</Menu.Item>
                </Menu>
            </Sider>

            <Layout>
                {/* 顶部导航栏（保持不变） */}
                <Header style={{ 
                    background: '#fff',
                    padding: '0 24px',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    borderBottom: '1px solid #f0f0f0'
                }}>
                    <Title level={4} style={{ margin: 0 }}>后台管理系统</Title>
                    <Avatar 
                        icon={<UserOutlined />} 
                        style={{ backgroundColor: '#1890ff' }}
                    />
                </Header>

                {/* 内容区改造（关键修改） */}
                <Content style={{ 
                    margin: 24,
                    padding: 24,
                    background: '#fff',
                    border: '1px solid #f0f0f0',
                    borderRadius: 2,
                    minHeight: 'calc(100vh - 112px)',
                    overflow: 'auto'
                }}>
                    {/* 替换为动态路由出口 */}
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    );
};

export default Home;